<template>
    <div id="container">
        <div id="viewDiv1" style="position:absolute;top:0;left:50%;width:50%;height:100%"><!--2D视图-->
            <div style="position:absolute;top:15px;left:15px;width:330px;height:auto;" >
                <el-tabs type="border-card" v-model="tabs1" style="height:100%;width:100%;"> 
                    <el-tab-pane name="距离测量1">
                        <template #label>
                            <div class="action-button esri-icon-measure" style="margin-right:7px"></div>
                            <span>距离测量</span>
                        </template>
                        <div id="距离测量1_div" style="width:100%;height:100%"> </div>
                    </el-tab-pane>
                    <el-tab-pane name="面积测量1">
                        <template #label>
                            <div class="action-button esri-icon-measure-area" style="margin-right:7px"></div>
                            <span>面积测量</span>
                        </template>
                        <div id="面积测量1_div" style="width:100%;height:100%"></div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="position:absolute;top:15px;left:350px;">
                <el-button type="danger" plain @click="取消测量1_click">取消测量</el-button>
            </div>
        </div>
        <div id="viewDiv2" style="position:absolute;top:0;left:0;width:50%;height:100%"><!--3D视图-->
            <div style="position:absolute;top:15px;left:15px;width:330px;height:auto;" >
                <el-tabs type="border-card" v-model="tabs2" style="height:100%;width:100%;"> 
                    <el-tab-pane name="距离测量2">
                        <template #label>
                            <div class="action-button esri-icon-measure" style="margin-right:7px"></div>
                            <span>距离测量</span>
                        </template>
                        <div id="距离测量2_div" style="width:100%;height:100%"></div>
                    </el-tab-pane>
                    <el-tab-pane name="面积测量2">
                        <template #label>
                            <div class="action-button esri-icon-measure-area" style="margin-right:7px"></div>
                            <span>面积测量</span>
                        </template>
                        <div id="面积测量2_div" style="width:100%;height:100%"></div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="position:absolute;top:15px;left:350px;">
                <el-button type="danger" plain @click="取消测量2_click">取消测量</el-button>
            </div>
        </div>

    </div>
</template>
     
<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import DistanceMeasurement2D from "@arcgis/core/widgets/DistanceMeasurement2D"
import AreaMeasurement2D from "@arcgis/core/widgets/AreaMeasurement2D"
import AreaMeasurement3D from "@arcgis/core/widgets/AreaMeasurement3D"
import DirectLineMeasurement3D from "@arcgis/core/widgets/DirectLineMeasurement3D"
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
import SceneView from '@arcgis/core/views/SceneView'
var map,view1,distanceMeasurement2D,areaMeasurement2D,directLineMeasurement3D,areaMeasurement3D,view2,active,sync,views=[]
const tabs1=ref("距离测量1")
const tabs2=ref("距离测量2")
var 取消测量1_click=()=>{
    distanceMeasurement2D.viewModel.clear()
    areaMeasurement2D.viewModel.clear()
}
var 取消测量2_click=()=>{
    directLineMeasurement3D.viewModel.clear()
    areaMeasurement3D.viewModel.clear()
}
onMounted(()=>{
    var layerUrl = "https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0"
    var layer = new FeatureLayer({//创建要素图层
        url: layerUrl,
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-fill",
                color:[255,255,255,0.3],
                outline:{
                    width:0
                }
            }
        }
    })
    map = new Map({//创建地图并设置底图
        basemap:"satellite"
    })
    map.add(layer)
    view1 = new MapView({//创建视图
        map: map,  container: "viewDiv1"
    })
    view2=new SceneView({
        map:map,container:"viewDiv2"
    })
    distanceMeasurement2D=new DistanceMeasurement2D({
        view:view1,
        container:"距离测量1_div"
    })
    areaMeasurement2D=new AreaMeasurement2D({
        view:view1,
        container:"面积测量1_div"
    })
    directLineMeasurement3D=new DirectLineMeasurement3D({
        view:view2,
        container:"距离测量2_div"
    })
    areaMeasurement3D=new AreaMeasurement3D({
        view:view2,
        container:"面积测量2_div"
    })
    view1.ui.remove(["zoom","attribution"])
    view2.ui.remove(["zoom","attribution","compass","navigation-toggle"])
    views = [view1, view2];//将2个视图放到一个数组中,为了方便遍历视图
    sync = (source) => {
      if (!active || !active.viewpoint || active !== source) {
        return
      }//如果当前存在正在激活的视图,且激活的视图存在视点,且激活的视图就是作为参数的视图,则执行下面的语句
      for (const view of views) {//遍历两个视图
        if (view !== active) {//将激活的视图的中心点传递给未激活的视图
          view.viewpoint = active.viewpoint;
        }
      }
    }
    for (const view of views) {//遍历两种视图
      view.watch(["interacting", "animation"], () => {//监听视图是否正在与用户交互(比如拖曳,旋转,缩放)或动画(如执行goTo方法)
        active = view;//本视图将作为当前激活的视图
        sync(active);//对当前激活的视图执行sync方法
      })
      view.watch("viewpoint", () => sync(view))//监听视点的变化,视点发生变化时不将本视图作为当前激活的视图
    }
    view1.when(()=>{
        view1.goTo({
            center:[120.122, 36.023], zoom: 15,
        },{
            duration:1000
        })
    })
})
</script>
  
<style scoped>
    #container,#viewDiv{
        width:100%; height:100%; padding:0;margin:0;
    }
    span{
        white-space: pre-line;
        font-size:13.5px;
        vertical-align:middle
    }
</style>
